<template>
  <div class="userEquipmentOption">
    <div class="userEquipmentOption_treeBg">
      <MetaTreeList title-size="18" title="设备" :default-props="defaultProps" :tree-data="equTreeData" @treeItemChoose="roloeItemChoose"></MetaTreeList>
    </div>
    <div class="userEquipmentOption_infoBg">
      <div class="userEquipmentOption_info">
        <div v-if="Object.keys(roleInfoItem).length > 0" class="equipmentO_rightArea">
          <div class="equipmentO_infoTitleBg">
            <div class="equipmentO_infoTitle">设备信息</div>
          </div>
          <el-form
            ref="roleInfo"
            :model="roleInfoItem"
            label-width="120px"
            size="mini"
            label-position="left"
            class="equipmentO_info"
          >
            <el-row>
              <el-col :span="16">
                <el-form-item label="设备名称">
                  <el-col class="equipmentO_infoLabel">{{ roleInfoItem.customizeName && roleInfoItem.customizeName !== '' ? roleInfoItem.customizeName : roleInfoItem.equipmentname }}</el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="光源开关">
                  <div class="equipmentO_formItem">
                    <img v-if="roleInfoItem.light_source && roleInfoItem.light_source == '1'" src="@/assets/equipment/side_light_o.png">
                    <img v-else src="@/assets/equipment/side_light.png">
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="可见光积分">
                  <el-col class="equipmentO_infoLabel">
                    {{ roleInfoItem.visible_light_integral ? roleInfoItem.visible_light_integral : '0' }}ms
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="补光灯电压">
                  <el-col class="equipmentO_infoLabel">
                    {{ roleInfoItem.fill_lamp_voltage ? roleInfoItem.fill_lamp_voltage : '0' }}V
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="短波积分">
                  <el-col class="equipmentO_infoLabel">
                    {{ roleInfoItem.shot_wave_integral ? roleInfoItem.shot_wave_integral : '0' }}ms
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="设置增益">
                  <el-col class="equipmentO_infoLabel">
                    {{ roleInfoItem.data_value_gain ? roleInfoItem.data_value_gain : '0' }}倍
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设置偏压">
                  <el-col class="equipmentO_infoLabel">
                    {{ roleInfoItem.power_supply_bias ? roleInfoItem.power_supply_bias : '0' }}mv
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="设备单次运行采集次数">
                  <el-col class="equipmentO_infoLabel">
                    <el-input-number size="mini" :step="1" :min="0" v-model="singleTimes" :precision="0" :disabled="roleInfoItem.timing && roleInfoItem.timing == '1'"></el-input-number>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="equipmentO_infoTitleBg">
            <div class="equipmentO_infoTitle">设备操作</div>
            <el-button v-if="stopBtnStatus()" type="danger" class="equipmentO_delBtn" plain size="mini" @click="stopCollect">停止</el-button>
          </div>
          <div class="equipmentO_eOptionArea">
            <div class="equipmentO_eOptionAreaBg">
              <!-- <div class="equipmentO_eImgArea" @click="equipInfo()"> -->
              <div class="equipmentO_eImgArea">
                <img v-if="roleInfoItem.equipment_type == '1'" src="@/assets/equipment/equipment_f.png">
                <img v-else-if="roleInfoItem.equipment_type == '2'" src="@/assets/equipment/equipment_m.png">
                <img v-else-if="roleInfoItem.equipment_type == '3'" src="@/assets/equipment/equipment_s.png">
              </div>
              <div class="equipmentO_option">
                <el-row :gutter="12" class="equipmentO_optionRow">
                  <el-col :span="24">
                    <el-card shadow="hover" :class="roleInfoItem.timing && roleInfoItem.timing == '1' ? 'equipmentO_optionCardWhole cardBg_o' : 'equipmentO_optionCardWhole'" :body-style="{padding: 0}">
                      <div class="equipmentO_optionCardBg">
                        <div class="equipmentO_optionCardTitle" @click.stop="doEquipOption('ds')">定时采集</div>
                        <div class="equipmentO_optionCardOption">
                          <div class="equipmentO_optionCardOptionRowUp">
                            <el-date-picker class="equipmentO_optionCardOptionCol" v-model="startTime" type="datetime" placeholder="请选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" size="mini" :disabled="roleInfoItem.timing && roleInfoItem.timing == '1'"></el-date-picker>
                            <el-input-number class="equipmentO_optionCardOptionCol" size="mini" :step="1" :min="1" v-model="roleInfoItem.timing_interval" :precision="0" style="margin-left: 15px;margin-right: 5px;" :disabled="roleInfoItem.timing && roleInfoItem.timing == '1'"></el-input-number>min
                          </div>
                          <div class="equipmentO_optionCardOptionRowDown">
                            <el-select class="equipmentO_optionCardOptionCol" v-model="kind" size="mini" placeholder="采集类型" :disabled="roleInfoItem.timing && roleInfoItem.timing == '1'">
                              <el-option label="连续采集" value="lx"></el-option>
                              <el-option label="设置次数" value="cs"></el-option>
                            </el-select>
                            <el-input-number class="equipmentO_optionCardOptionCol" v-if="kind === 'cs'" size="mini" :step="1" :min="1" v-model="times" :precision="0" style="margin-left: 15px;margin-right: 5px" :disabled="roleInfoItem.timing && roleInfoItem.timing == '1'"></el-input-number>{{kind === 'cs' ? '次' : ''}}
                          </div>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 单次采集备注 ldc -->
    <el-dialog
      v-if="dcRemarkFlag"
      title="添加备注（选填）"
      :visible.sync="dcRemarkFlag"
      width="50%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-input v-model="dcRemark" placeholder="请输入备注"></el-input>
      <div class="dialogFooter">
        <el-button size="mini" @click="dcRemarkFlag = false">取消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="doDCCollect()"
        >采集</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import MetaChoiceList from '../components/MetaChoiceList'
import MetaTreeList from '../components/MetaTreeList'
import deepClone from '../utils/deepClone'
import utils from '../utils/utils'
export default {
  name: 'userEquipmentOption',
  components: {
    MetaChoiceList,
    MetaTreeList
  },
  data () {
    return {
      roleInfoItem: {},
      equipData: [],
      equipDataStr: '',
      kind: 'lx',
      choiceListTreeBtn: {
        ifEdit: false,
        ifDelete: false
      },
      ws: null,
      username: '',
      seconds: 2,
      singleTimes: 10,
      times: 1,
      dnChart: null,
      startTime: '',
      reflectivityChart: null,
      realEquipmentList: [],
      dcRemarkFlag: false,
      dcRemark: '',
      equipParam: {},
      settingFlag: false,
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      equTreeData: [],
    }
  },
  created() {
    this.initWebsocket()
  },
  mounted() {
    this.initEquipmentData()
  },
  destroyed() {
    if(this.ws) {
      this.ws.close()
      this.ws = null
    }
  },
  methods: {
    initWebsocket() {
      let _this = this
      _this.username = localStorage.getItem('username')
      if ('WebSocket' in window) {
        // 打开一个 web socket
        let ws = new WebSocket(process.env.PROGOO_SOCKET + `ws/${_this.username}`)
        _this.ws = ws
        // let ws = new WebSocket(`ws://39.98.121.176:32766/?${key}&${time}`);
        ws.onopen = function() {
          // Web Socket 已连接上，使用 send() 方法发送数据
          _this.$message({
            message: '设备通讯连接成功',
            type: 'success'
          });
        }
        ws.onmessage = function(evt) {
          try {
            let msg = JSON.parse(evt.data)
            _this.websocketMsgHandle(msg)
          } catch (error) {
            console.log('不是个json对象')
          }
        }
        ws.onclose = function() {
          // 关闭 websocket
        }
        ws.onerror = function() {
          _this.$message.error('设备通讯连接已断开')
        }
      } else {
        // 浏览器不支持 WebSocket
        alert('您的浏览器不支持 WebSocket!')
      }
    },
    websocketMsgHandle(msg) {
      console.log(msg)
      if(msg.type === 13) {
        if(msg.fixed_type_list && msg.fixed_type_list.length > 0) {
          if(msg.fixed_type_list[0].equipmentId === this.roleInfoItem.id) {
            // 设备控制改造 ------ start 20211019 -------
            // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
            let item = deepClone(this.roleInfoItem)
            this.roleInfoItem = {}
            let dataParams = msg.fixed_type_list[0].panel_parameters
            item.continuity = dataParams.collectionType == '2' ? 1 : 2
            item.dark = dataParams.collectionType == '4' ? 1 : 2
            item.light_source = dataParams.light_source
            item.sample = dataParams.collectionType == '3' ? 1 : 2
            item.timing = dataParams.collectionType == '7' ? 1 : 2
            item.reference = dataParams.collectionType == '5' ? 1 : 2
            this.roleInfoItem = deepClone(item)
            // 设备控制改造 ------ end 20211019 -------

            // let item = deepClone(this.roleInfoItem)
            // this.roleInfoItem = {}
            // let dataParams = msg.fixed_type_list[0].panel_parameters

            // item.continuity = dataParams.continuity
            // item.dark = dataParams.dark
            // item.light_source = dataParams.light_source
            // item.record = dataParams.record
            // item.reference = dataParams.reference
            // item.sample = dataParams.sample
            // item.timing = dataParams.timing
            // item.timing_interval = dataParams.timing_interval

            // this.roleInfoItem = deepClone(item)
          }
        }
      }else if(msg.type === 17) {
        this.realEquipmentList = msg.fixed_type_list ? msg.fixed_type_list : []
      }
      // else if(msg.type === 100) {
      //   let showData = {}
      //   if(msg.equipment_type == '1') {
      //     showData = msg.fixed_type_list.length > 0 ? msg.fixed_type_list[0] : {}
      //   }
      //   if(Object.keys(showData).length > 0) {
      //     if(showData.equipmentId === this.roleInfoItem.id) {
      //       for(let i in showData.dataList) {
      //         let selectItem = {}
      //         selectItem.value = showData.dataList[i].value
      //         selectItem.name = showData.dataList[i].name
      //         selectItem.xData = showData.centralWavelength
      //         selectItem.yData = showData.dataList[i].arr
      //         this.chartInit(selectItem)
      //       }
      //     }
      //   }
      // }
    },
    doEquipOption(type) {
      if(this.roleInfoItem.collection_type == 7) {
        // 定时采集中
        return
      }
      if(this.realEquipmentList.length > 0) {
        if(this.getEquipmentStatus(this.roleInfoItem.id) !== 2) {
          if (type === 'dc' || type === 'lx' || type === 'ds') {
            if(!this.roleInfoItem.aid || this.roleInfoItem.aid === '') {
              this.$notify.error({
                title: '错误',
                message: "请先到【设备管理】关联算法后，再进行采集。"
              });
              return
            }
            if(type === 'ds' && this.startTime === '') {
              this.$notify.error({
                title: '错误',
                message: "请选择采集开始时间"
              });
              return
            }
            let nowTimes = parseInt(new Date().getTime() / 1000 / 60)
            let chooseTimes = parseInt(new Date(this.startTime).getTime() / 1000 / 60)
            if(type === 'ds' && chooseTimes < nowTimes) {
              this.$notify.error({
                title: '错误',
                message: "定时采集时间不可早于当前时间"
              });
              return
            }
          }
          //单次采集增加备注 ldc
          if(type === 'dc') {
            this.dcRemark = ''
            this.dcRemarkFlag = true
          }else {
            this.$confirm('是否立即执行采集任务?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '再等等',
              type: 'warning'
            }).then(() => {
              let msgJson = {
                username: this.username,
                snid: this.roleInfoItem.snid,
                type: type,
                seconds: this.seconds,
                version: this.roleInfoItem.version,
                remark: ''
              }
              if(type !== 'adl' && type !== 'bzb') {
                msgJson.times = this.singleTimes && this.singleTimes !== '' && this.singleTimes !== 0 ? this.singleTimes : 10
              }
              if(type === 'ds') {
                msgJson.time = this.roleInfoItem.timing_interval
                // msgJson.count = this.times && this.times !== '' && this.times !== 0 ? this.times : 0
                if(this.kind === 'lx') {
                  msgJson.count = 0
                }else {
                  msgJson.count = this.times && this.times !== '' && this.times !== 0 ? this.times : 0
                }
                msgJson.startTime = this.startTime
              }
              this.ws.send(JSON.stringify(msgJson))
              this.$notify.success({
                title: "成功",
                message: "开始采集!",
              });
            })
          }
        }else {
          this.$notify.error({
            title: '错误',
            message: "当前设备不在线"
          });
        }
      }else {
        this.$notify.error({
            title: '错误',
            message: "正在获取设备信息"
          });
      }

    },
    getEquipmentStatus(equipmentId) {
      let status = ''
      for(let i in this.realEquipmentList) {
        for(let j in this.realEquipmentList[i].list) {
          if(this.realEquipmentList[i].list[j].id === equipmentId) {
            status = this.realEquipmentList[i].list[j].on_type
            return status
          }
        }
      }
      return status
    },
    initEquipmentData() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/userarea",
        method: "post",
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          this.equTreeData = res.data.result
          this.equipData = []
          let currentDataItem = {}
          for(let i in this.equTreeData) {
            this.equTreeData[i].name = "(" + this.equTreeData[i].area_jc + ")" + this.equTreeData[i].area_name
            this.equTreeData[i].level = 1
            for(let j in this.equTreeData[i].list) {
              if(this.equTreeData[i].list[j].customizeName && this.equTreeData[i].list[j].customizeName !== '') {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].customizeName
              }else {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].equipmentname
              }
              this.equTreeData[i].list[j].level = 2
              for(let key in this.equTreeData[i].list[j].equipmentRecord) {
                //子表中的这些参数不正确，不加入主表。
                if(key === 'aid' || key === 'id' || key === 'eid' || key === 'snid' || key === 'equipment_type') {
                  continue
                }
                this.equTreeData[i].list[j][key] = this.equTreeData[i].list[j].equipmentRecord[key]
              }
              this.equipData.push(this.equTreeData[i].list[j])
              if(Object.keys(this.roleInfoItem).length > 0 && this.roleInfoItem.id === this.equTreeData[i].list[j].id){
                currentDataItem = this.equTreeData[i].list[j]
              }
            }
          }
          // this.equipDataStr = JSON.stringify(this.equipData)
          if(Object.keys(currentDataItem).length > 0) {
            this.roleInfoItem = deepClone(currentDataItem)
          }else {
            this.roleInfoItem = {}
          }
          // this.$nextTick(() => {
          //   this.$refs.userEquipmentOption_list.setChoiceRole(this.roleInfoItem)
          // })

        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    roloeItemChoose(item) {
      if(item.level === 1) {
        return
      }
      this.roleInfoItem = deepClone(item)
      // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
      if(this.roleInfoItem.collection_type == 1) {
        this.roleInfoItem.continuity = 2
      }else if(this.roleInfoItem.collection_type == 2) {
        this.roleInfoItem.continuity = 1
      }else if(this.roleInfoItem.collection_type == 6) {
        this.roleInfoItem.timing = 2
      }else if(this.roleInfoItem.collection_type == 7) {
        this.roleInfoItem.timing = 1
      }else if(this.roleInfoItem.collection_type == 8) {
        this.roleInfoItem.continuity = 2
        this.roleInfoItem.timing = 2
      }

      this.singleTimes = this.roleInfoItem.acquisition_density // times -> 采集密度
      if(this.roleInfoItem.timing_time && this.roleInfoItem.timing_time !== '') {
        let startTime = new Date(this.roleInfoItem.timing_time)
        this.startTime = startTime
      }else {
        this.startTime = ''
      }
      // this.startTime = this.roleInfoItem.timing_time // startTime -> 开始时间
      this.times = this.roleInfoItem.timing_bout // count -> 定时采集次数
      if(this.times == 0) {
        this.kind = 'lx'
      }else {
        this.kind = 'cs'
      }
    },
    stopBtnStatus() {
      if((this.roleInfoItem.continuity && this.roleInfoItem.continuity == '1') || (this.roleInfoItem.timing && this.roleInfoItem.timing == '1')) {
        return true
      }
      return false
    },
    stopCollect() {
      let msgJson = {}
      if(this.roleInfoItem.continuity && this.roleInfoItem.continuity == '1') {
        msgJson = {
          username: this.username,
          version: this.roleInfoItem.version,
          snid: this.roleInfoItem.snid,
          type: 'stop'
        }
      }else if(this.roleInfoItem.timing && this.roleInfoItem.timing == '1') {
        msgJson = {
          username: this.username,
          version: this.roleInfoItem.version,
          snid: this.roleInfoItem.snid,
          type: 'timeStop'
        }
      }
      this.ws.send(JSON.stringify(msgJson))
    },
    // chartInit(data) {
    //   let echarts = require('echarts')
    //   if(data.value === 'dnValue') {
    //     this.dnChart = echarts.init(this.$refs['dnChart'])
    //     this.dnChart.setOption({
    //       title: {
    //         text: 'dn值',
    //         x:'center',
    //         y:'top',
    //         textStyle: {
    //           color: '#C0FFFF'
    //         }
    //       },
    //       color: ['#9244E3'],
    //       tooltip: {
    //         trigger: 'axis'
    //       },
    //       grid: {
    //         left: '15%',
    //         bottom: '5%',
    //         top: '10%',
    //         height: '80%',
    //         right: '2%',
    //         show: true,
    //         backgroundColor: '#002738'
    //         // containLabel: true
    //       },
    //       xAxis: {
    //         type: 'category',
    //         axisLine: {
    //           lineStyle: {
    //             color: '#C0FFFF',
    //           }
    //         },
    //         axisLabel: {
    //           show: true,
    //           fontSize: 10
    //         },
    //         boundaryGap: false,
    //         data: data.xData
    //       },
    //       yAxis: {
    //         type: 'value',
    //         axisLine: {
    //           lineStyle: {
    //             color: '#C0FFFF'
    //           }
    //         },
    //         axisLabel: {
    //           show: true,
    //           fontSize: 10
    //         },
    //         splitLine: {
    //           lineStyle: {
    //               color: ['#34697c']
    //           }
    //         },
    //         scale:true
    //       },
    //       series: [
    //         {
    //           name: data.name,
    //           type: 'line',
    //           stack: '总量',
    //           smooth: true,
    //           data: data.yData,
    //           areaStyle: {
    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //               offset: 0,
    //               color: 'rgba(146,68,227,0.3)'
    //             }, {
    //               offset: 1,
    //               color: '#9244E3'
    //             }])
    //           },
    //         }
    //       ]
    //     })
    //     this.$nextTick(() => {
    //       this.dnChart.resize()
    //     })
    //   }else if(data.value === 'reflectivity') {
    //     this.reflectivityChart = echarts.init(this.$refs['reflectivityChart'])
    //     this.reflectivityChart.setOption({
    //       title: {
    //         text: '反射率',
    //         x:'center',
    //         y:'top',
    //         textStyle: {
    //           color: '#C0FFFF'
    //         }
    //       },
    //       color: ['#9244E3'],
    //       tooltip: {
    //         trigger: 'axis'
    //       },
    //       grid: {
    //         left: '15%',
    //         bottom: '5%',
    //         top: '10%',
    //         height: '80%',
    //         right: '2%',
    //         show: true,
    //         backgroundColor: '#002738'
    //         // containLabel: true
    //       },
    //       xAxis: {
    //         type: 'category',
    //         axisLine: {
    //           lineStyle: {
    //             color: '#C0FFFF',
    //           }
    //         },
    //         axisLabel: {
    //           show: true,
    //           fontSize: 10
    //         },
    //         boundaryGap: false,
    //         data: data.xData
    //       },
    //       yAxis: {
    //         type: 'value',
    //         axisLine: {
    //           lineStyle: {
    //             color: '#C0FFFF'
    //           }
    //         },
    //         axisLabel: {
    //           show: true,
    //           fontSize: 10
    //         },
    //         splitLine: {
    //           lineStyle: {
    //               color: ['#34697c']
    //           }
    //         },
    //         scale:true
    //       },
    //       series: [
    //         {
    //           name: data.name,
    //           type: 'line',
    //           stack: '总量',
    //           smooth: true,
    //           data: data.yData,
    //           areaStyle: {
    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //               offset: 0,
    //               color: 'rgba(146,68,227,0.3)'
    //             }, {
    //               offset: 1,
    //               color: '#9244E3'
    //             }])
    //           },
    //         }
    //       ]
    //     })
    //     this.$nextTick(() => {
    //       this.reflectivityChart.resize()
    //     })
    //   }
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.userEquipmentOption{
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .userEquipmentOption_treeBg {
    height: 100%;
    border: 1px solid #e4eaec;
    border-radius: 6px;
  }
  .userEquipmentOption_infoBg {
    height: 100%;
    box-sizing: border-box;
    padding: 0 7px;
    flex: 1;
  }
  .userEquipmentOption_info {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: 1px solid rgb(228, 234, 236);
    flex: 1;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 15px;
    .equipmentO_rightArea{
      .equipmentO_infoTitleBg {
        width: 100%;
        float: left;
        // margin-top: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e4e7ed;
        .equipmentO_infoTitle {
          font-size: 20px;
          float: left;
          height: 30px;
          line-height: 30px;
        }
        .equipmentO_delBtn {
          float: right;
        }
      }
      .equipmentO_info {
        width: 100%;
        float: left;
        padding-top: 10px;
        .equipmentO_infoLabel {
          color: #606266;
        }
        .equipmentO_formItem {
          display: flex;
          align-items: center;
        }
      }
      .equipmentO_eOptionArea {
        width: 100%;
        float: left;
        .equipmentO_eOptionAreaBg {
          width: 100%;
          float: left;
          display: flex;
          box-sizing: border-box;
          padding: 10px 0;
          .equipmentO_eImgArea {
            flex: 1;
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            padding: 0 10px;
            align-items: flex-start;
            img {
              width: 100%;
            }
          }
          .equipmentO_option {
            flex: 4;
            box-sizing: border-box;
            .equipmentO_optionRow {
              margin-bottom: 12px;
              .equipmentO_optionCard {
                cursor: pointer;
                .equipmentO_optionCardBg {
                  width: 100%;
                  padding: 20px;
                  box-sizing: border-box;
                  display: flex;
                  .equipmentO_optionCardTitle {
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 10px;
                    flex: 1;
                  }
                }
              }
              .equipmentO_optionCardWhole {
                .equipmentO_optionCardBg {
                  width: 100%;
                  display: flex;
                  box-sizing: border-box;
                  padding-right: 20px;
                  align-items: center;
                  .equipmentO_optionCardTitle {
                    box-sizing: border-box;
                    padding: 20px 0 20px 20px;
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 10px;
                    flex: 1;
                    cursor: pointer;
                  }
                  .equipmentO_optionCardOption {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    .equipmentO_optionCardOptionRowUp {
                      display: flex;
                      padding: 10px 0 5px;
                      .equipmentO_optionCardOptionCol {
                        flex: 1;
                      }
                    }
                    .equipmentO_optionCardOptionRowDown {
                      display: flex;
                      padding: 5px 0 10px;
                      .equipmentO_optionCardOptionCol {
                        flex: 1;
                      }
                    }
                  }
                }
              }
              .cardBg_o{
                background: #7FFFD4
              }
            }
          }
        }
      }
      .equipmentO_chartBg {
        width: 100%;
        float: left;
        height: 400px;
        .equipmentO_chartItem {
          width: 50%;
          float: left;
          height: 100%;
          box-sizing: border-box;
          padding: 10px;
        }
        .equipmentO_originalParamChart {
          width: 100%;
          height: 100%;
          float: left;
        }
      }
    }
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
</style>
